@extends('public.dashboard_base')
@section('title', '发票列表')
@section('content')
    <div class="control_panel_content">
        <div class="navBreadcrumb">
            <ul>
                <li>资金管理</li>
                <li><a href="/funds/invoice/list">发票列表</a></li>
            </ul>
        </div>
        <div class="panel">
            <div class="sub_nav_container" style="margin-bottom: 20px">
                <ul class="clearfix">
                    <li><a href="/funds/invoice">申请发票</a></li>
                    <li class="active"><a href="/funds/invoice/list">发票列表</a></li>
                </ul>
            </div>

            <div class="demoTable layui-form-item">
                <label class="layui-form-label">状态类型</label>
                <div class="layui-input-inline">
                    <select id="search_status" style="width: 150px;">
                        <option value=""> 全部</option>
                        <option value="0">申请</option>
                        <option value="1">通过</option>
                        <option value="2">驳回</option>
                    </select>
                </div>

                <label class="layui-form-label">搜索</label>
                <div class="layui-input-inline">
                    <input class="layui-input" id="search_value" placeholder="抬头--证件号" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="search">搜索</button>
            </div>

            <table id="table" lay-filter="table"></table>

            {{--         行按钮            --}}
            <script type="text/html" id="barDemo">
                @{{#  if(d.status == 1){ }}
                @{{#  if(d.invoice_img  == null || d.invoice_img == ''){ }}
                <button class="layui-btn layui-btn-xs layui-btn-normal">开票中...</button>
                @{{#  }else{ }}
                <button class="layui-btn layui-btn-xs " lay-event="show_img" style="background-color: orange">查看发票
                </button>
                @{{#  } }}
                @{{#  } }}
                @{{#  if(d.status == 2){ }}
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="show_remarks">驳回内容</a>
                @{{#  } }}
            </script>
            {{--         显示属性            --}}
            <script type="text/html" id="statusTpl">
                @{{#  if(d.status == 0){ }}
                <span style="color: green">申请 </span>
                @{{#  } }}
                @{{#  if(d.status == 1){ }}
                <span style="color: blue">通过 </span>
                @{{#  } }}
                @{{#  if(d.status == 2){ }}
                <span style="color: red">驳回 </span>
                @{{#  } }}
            </script>

        </div>

    </div>
@endsection
@section('script')
    <script type="text/javascript" src="/static/js/laydate.js"></script>
    <script>
        $(function () {
            var link = $("#funds-invoice");
            link.parent().parent().parent().addClass("active");
            link.parent().addClass("active");
        });


        //表格
        var current_id = '';
        layui.table.render({
            elem: '#table'
            , id: 'id_table'
            //  , toolbar: '#toolbar'
            , url: '/funds/invoice/list' //数据接口
            , method: 'POST'
            , headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'}
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            , page: true //开启分页
            , limit: 10
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 70, sort: true, fixed: 'left'}
                , {field: 'invoice_title', title: '发票抬头'}
                , {field: 'invoice_id_num', title: '纳税人识别号'}
                , {field: 'receiver_email', title: '接收邮箱'}
                , {field: 'receiver_mobile', title: '联系电话', width: 120}
                , {field: 'invoice_amount', title: '开票金额', width: 100}
                , {field: 'created_at', title: '申请时间', width: 160, sort: true}
                , {field: 'status', title: '状态', width: 80, sort: true, templet: '#statusTpl'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
            ]]
            , defaultToolbar: [] //'filter', 'exports', 'print'
        });

        //监听搜索按钮
        // var $ = layui.$, active = {
        var active = {
            search: function () {
                layui.table.reload('id_table', {
                    where: { //设定异步数据接口的额外参数，任意设
                        value: $('#search_value').val()
                        , status: $('#search_status').val()
                    }
                });
            }
        };

        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        layui.table.on('tool(table)', function (obj) {
            if (obj.event === 'show_remarks') {
                layer.open({
                    title: '驳回内容',
                    content: obj.data.remarks,
                    shadeClose: true, //开启遮罩关闭
                });
            } else if (obj.event === 'show_img') {
                layer.photos({
                        photos: {
                            "data": [
                                {"src": obj.data.invoice_img},
                            ]
                        }
                    }
                );
            }
        });

        //获取选中数据
        function getCheckStatusItem() {
            var checkStatus = layui.table.checkStatus('table');
            var data = checkStatus.data;  //获取选中行数据
            var ids = [];
            $.each(data, function ($key, $el) {
                ids.push($el.id);
            });
            return ids;
        }

    </script>
@endsection
